<template>
  <div >
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="regist-page">
    <div style="height:40px;width:100%"></div>
    <div id="progress-bar" class="auto-width">
      <div class="text">
        <span class="active">验证手机</span>
        <span
          class="round2"
          :style="{ color: index > 0 ? '#EE781B' : '#4A4A4A' }"
          >重新输入密码</span
        >
        <span
          class="round3"
          :style="{ color: index > 1 ? '#EE781B' : '#4A4A4A' }"
          >找回成功</span
        >
      </div>
      <div class="bar-wrapper">
        <div class="bar active">
          <span class="round">1</span>
        </div>
        <div class="bar" id="round2">
          <span
            class="round"
            :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
            >2</span
          >
          <div
            class="line"
            :style="{ background: index > 0 ? '#EE781B' : '#F7C89D' }"
          ></div>
        </div>
        <div class="bar" id="round3">
          <span
            class="round fa fa-check"
            :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
            >3</span
          >
          <div
            class="line"
            :style="{ background: index > 1 ? '#EE781B' : '#F7C89D' }"
          ></div>
        </div>
      </div>
    </div>
    <div class="register-box">
      <div id="step-1" v-if="index == 0">
        <form id="step-1-form" action="" method="" autocomplete="off">
          <div class="input-group">
            <!--st1:phone-->
            <div class="inner-box">
              <span class="lable">手机号</span>
              <input
                class="phone"
                type="text"
                name="phone"
                placeholder="请输入手机号"
                autocomplete="new-password"
                maxlength="11"
                style="width:246px"
                v-model.trim="dataForm.phone"
              />
           
            </div>
          </div>
          <div class="input-group">
            <!--st1:m_code-->
            <div class="inner-box">
              <span class="lable">手机验证码</span>
              <div class="wrapper">
                <input
                  type="text"
                  id="m_code"
                  class="v-code"
                  name="m_code"
                  placeholder="请输入验证码"
                  v-model.trim="dataForm.verifySmsCode"
                  autocomplete="new-password"
                  maxlength="6"
                />
                <input
                  type="button"
                  class="box sendSms"
                  @click="sendSms"
                  :disabled="disabled"
                  :value="smsTitle"
                />
              </div>
            </div>
          </div>
          <input
            type="button"
            value="下一步"
            class="sub"
            @click="toNextSecond(1)"
          />
        </form>
      </div>
      <div id="step-2" v-if="index == 1">
        <form id="step-2-form" action="" method="post" autocomplete="off">
    
          <div class="input-group">
            <div class="inner-box">
              <!--st2:upwd-->
              <span class="lable">新密码</span>
              <div class="wrapper">
                <input
                  class="phone"
                  type="password"
                  name="upwd"
                  autocomplete="new-password"
                  placeholder="请输入新密码"
                  v-model.trim="dataForm.userPwd"
                  @blur="usePwdValidate(dataForm.userPwd)"
                />
              </div>
            </div>
          </div>
          <div class="input-group">
            <div class="inner-box">
              <!--st2:upwd2-->
              <span class="lable">确认密码</span>
              <input
                class="phone"
                type="password"
                name="upwd2"
                placeholder="请再次输入密码"
                maxlength="14"
                :disabled="pwdDisabled"
                v-model.trim="dataForm.comfirmPwd"
                @blur="comfirmUsePwdValidate(dataForm.comfirmPwd)"
              />
            </div>
          </div>
          <input
            type="button"
            value="下一步"
            class="sub"
            style="margin-left:167px"
            @click="toNextSecond(3)"
          />
        </form>
      </div>
      <div id="step-3" v-if="index == 3">
        <div class="container clearfix">
          <img src="../../assets/img/succ.png" class="fl" />

          <div class="title">
            <div class="user-info">
              <p>恭喜您！找回成功，请等待首页重新登录</p>
              <p>系统将5秒后跳转到登录页，如未跳转晴点击
                 <nuxt-link to="/login">跳转到首页</nuxt-link>
                </p>
            </div>
          </div>
        </div>
      </div>
       </div>
    </div>
    <div style="height:50px"></div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import selectMock from "../../components/selectMock";
import navPage from "../../components/nav";
var pwdRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    selectMock,
    navPage
  },
  data() {
    return {
      index: 0,
      timer: null,
      smsTitle: "发送验证码",
      disabled: false,
      pwdDisabled: true,
      dataForm: {
        phone: "",
        userPwd:'',
        comfirmPwd:""
      
      },
      userTypeList: [
        { value: "PERSON", label: "个人" },
        { value: "CORP", label: "企业" }
      ],
      merchantTypeList: [],
      pwdIsRight: false,
      loading:false,
    };
  },
    mounted () {

        
  },
  methods: {
 
    // 去注册第二步
    toNextSecond(index) {
      if (index == 1) {
        var regex = /^1\d{10}$/;
        if (!regex.test(this.dataForm.phone)) {
          this.$message.error("请输入正确的手机号");
          return;
        } else if (this.dataForm.verifySmsCode.length !== 4) {
          this.$message.error("请输入正确的手机验证码");
          return;
        }
        else {
          var data = {
            phone: this.dataForm.phone,
            verifySmsCode: this.dataForm.verifySmsCode.toUpperCase()
          };
          this.loading = true
          this.$http("post", "/sys/user/verifySmsCode.do", data).then(res => {
            if (res.code == "0000") {
            
              this.index = index;
            }
               this.loading = false
          });
        }
      } else if (index == 3) {
        if (this.dataForm.userPwd == "") {
          this.$message.error("请输入密码");
          return;
        } else if (this.dataForm.comfirmPwd == "") {
          this.$message.error("请输入确认密码");
          return;
        } else {
           this.loading = true
           var data = {
              phone: this.dataForm.phone,
              userPwd:this.dataForm.userPwd
           }
          this.$http("post", "/sys/user/changePwd.do", this.dataForm, "json").then(
            res => {
              if (res.code == "0000") {
                this.index = index;
                setTimeout(()=>{
                  this.$router.push("/login")
                },5000)
              }
               this.loading = false
            }
          );
        }
      }
    },
    // 选择用户类型
    selectUserTypeValue(val) {
      
     
      this.dataForm.merchantType =  val
    },
    // 选择类型
    selectTypeValue(val) {
      this.dataForm.userType = val;
    },
    // 密码验证
    usePwdValidate(val) {
      if (!pwdRegex.test(val)) {
        this.$message.error("请输入6-18位包含数字和字母的密码");
        this.pwdDisabled = true;
      } else {
        this.pwdDisabled = false;
      }
    },
    // 再次确认密码验证
    comfirmUsePwdValidate(val) {
      if (this.dataForm.userPwd !== this.dataForm.comfirmPwd) {
        this.$message.error("两次密码输入不一致");
        this.pwdIsRight = false;
      } else {
        this.pwdIsRight = true;
      }
    },
    countDown() {
      var t = 60;
      this.timer = setInterval(() => {
        t--;
        if (t == 0) {
          this.smsTitle = "发送验证码";
          this.disabled = false;
          clearInterval(this.timer);
          return;
        }

        this.smsTitle = t + "s重新发送";
      }, 1000);
    },
    // 发送短信
    sendSms() {
      console.log("点我");
      var regex = /^1\d{10}$/;
      if (regex.test(this.dataForm.phone)) {
        this.$http("post", "/sys/user/sendVerifySmsCode.do", {
          phone: this.dataForm.phone
        }).then(res => {
          if (res.code == "0000") {
            this.$message({
              type: "success",
              message: "发送成功"
            });
            this.countDown();
            this.disabled = true;
          }
        });
      } else {
        this.$message.error("请输入正确的手机号");
      }
    }
  }
};
</script>
<style scoped>
.user-info {
  margin-bottom: 50px;
}
.user-info p {
  line-height: 20px;
}

.user-info p:nth-child(1) {
  font-size: 16px;
  color: #4A4A4A;
  margin-top: 10px;
  margin-bottom: 10px;
}
.user-info p:nth-child(2) {
  font-size: 14px;
  color: #9B9B9B;
}
.user-info p:nth-child(2) a{
  font-size: 14px;
  color: #EE7A1E;
}
.auto-width {
  width: 1200px;
  margin: 0 auto;
}
.prompt h2 {
  font-size: 14px;
  color: #606266;
}
.prompt p {
  color: #9B9B9B;
  font-size: 14px;
  line-height: 160%;
}
.prompt p span {
  color: #EE781B;
}
#progress-bar {

  width: 1049px;
height: 130px;
background: #F6F6F6;
border-radius: 4px;

}
#progress-bar .text {
  margin-bottom: 15px;
  font-size: 0;
  padding-top: 25px;
}
#progress-bar .text span {
  display: inline-block;
  width: 32.33%;
  font-size: 16px;
  text-align: center;
  color: #4a4a4a;
}
#progress-bar .text span.active {
  color: #EE781B;
}
#progress-bar .bar-wrapper {
  font-size: 0;
}
#progress-bar .bar-wrapper .bar {
  width: 32.33%;
  text-align: center;
  display: inline-block;
  position: relative;
}
#progress-bar .bar-wrapper .bar .round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  background: #cdcdcd;
  display: inline-block;
  position: relative;
  z-index: 50;
}
#progress-bar .bar-wrapper .bar .line {
  width: 100%;
  height: 7px;
  background: #cdcdcd;
  position: absolute;
  left: -50%;
  top: 16px;
  z-index: 1;
}
#progress-bar .bar-wrapper .bar.active .round,
#progress-bar .bar-wrapper .bar.active .line {
  background: #EE781B;
}
.register-box {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 0;
  height: auto;
}
.regist-page {
  background: #fff;
  width: 1200px;
  margin:10px auto;
}
#step-1 {
  width: 720px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-2 {
  width: 520px;
  margin: 0 auto;
  margin-bottom: 50px;
}
#step-1 .input-group,
#step-2 .input-group {
  position: relative;
  height: 60px;
}
#step-1 .input-group .inner-box,
#step-2 .input-group .inner-box {
  height: 50px;
  line-height: 50px;
}
#step-1 .input-group .inner-box .lable,
#step-2 .input-group .inner-box .lable {
  font-size: 14px;
  display: inline-block;
  width: 125px;
  text-align: right;
  margin-right: 35px;
  color: #000000;
  height: 36px;
  line-height: 36px;
}
#step-1 .input-group .inner-box .phone,
#step-2 .input-group .inner-box .phone {
  height: 35px;
  width: 296px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  text-indent: 10px;

  font-size: 14px;
}
.sendSms {
  border: 0;
}
.sendSms:active {
  border: 0;
}
#step-1 .input-group .inner-box .wrapper,
#step-2 .input-group .inner-box .wrapper {
  height: 50px;
  line-height: 50px;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  position: relative;
}
#step-1 .input-group .inner-box .wrapper {
width: 350px;
}
#step-2 .input-group .inner-box .wrapper  {
width: 298px;
}
#step-1 .input-group .inner-box .wrapper .v-code,
#step-2 .input-group .inner-box .wrapper .v-code {
  width: 246px;
  height: 35px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 14px;
  vertical-align: middle;
  background: #f6f6f6;
    border: 1px solid #e7e7e7;
}

#step-1 .input-group .inner-box .wrapper .box,
#step-2 .input-group .inner-box .wrapper .box {
  display: inline-block;
  width: 91px;
  height: 35px;
  background: #ffe7e7;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  color: #d0021b;
  font-size: 14px;
  vertical-align: middle;
  margin-left: 6px;
}
#step-1 .input-group .inner-box .wrapper .box img {
  width: 100px;
  height: 35px;
}
#step-1 .input-group .inner-box .wrapper .box.box:hover,
#step-2 .input-group .inner-box .wrapper .box.box:hover {
  cursor: pointer;
}
#step-1 .input-group .inner-box .wrapper p,
#step-2 .input-group .inner-box .wrapper p {
  display: block;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: -130%;
  font-size: 16px;
  display: none;
}
#step-1 .input-group .inner-box .wrapper p .fa,
#step-2 .input-group .inner-box .wrapper p .fa {
  color: #2998e5;
}
#step-1 .input-group .warning,
#step-2 .input-group .warning {
  position: absolute;
  width: 155%;
  bottom: 5px;
  text-indent: 158px;
  color: #dd4249;
  display: none;
}
#step-1 .input-group .warning .fa,
#step-2 .input-group .warning .fa {
  margin-right: 8px;
}
#step-1 .sub,
#step-2 .sub {
  display: block;
  margin-top: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  width: 246px;
  height: 44px;
  background: #EE781B;
  border-radius: 4px;
}
#step-1 .sub {
  margin-left: 165px;
}
#step-1 .sub[disabled],
#step-2 .sub[disabled] {
  background: #aaaaaa !important;
  cursor: not-allowed;
}
#step-1 input[disabled] {
  cursor: not-allowed;
}

#step-2 .wrapper input {
  vertical-align: middle;
}
#step-2 .wrapper .safety {
  position: absolute;
  height: 50px;
  width: 150px;
  top: -5px;
  right: -75%;
  overflow: hidden;
}
#step-2 .wrapper .safety dl {
  width: 33.33%;
  float: left;
  text-align: center;
}
#step-2 .wrapper .safety dl dt {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #cdcdcd;
}
#step-2 .wrapper .safety dl dd {
  width: 100%;
  height: 10px;
  background: #cdcdcd;
}
#step-2 .wrapper .safety .safety-1.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-1.active dd {
  background: #dd5347;
}
#step-2 .wrapper .safety .safety-2.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-2.active dd {
  background: #faba6d;
}
#step-2 .wrapper .safety .safety-3.active dt {
  color: #1a1a1a;
}
#step-2 .wrapper .safety .safety-3.active dd {
  background: #1ba261;
}

#step-3 .container {
  width: 500px;
  margin: 0 auto 40px auto;
  margin-bottom: 70px;
}
#step-3 .container .title {
  text-align: left;
  margin-bottom: 50px;
  float: left;
}
#step-3 .container img {
  display: inline-block;
  width: 55px;
  height: 55px;
  vertical-align: middle;
  margin-right: 25px;
}
#step-3 .container .title .text {
  display: inline-block;
  height: 55px;
  line-height: 55px;
  font-size: 26px;
  vertical-align: middle;
}
#step-3 .container .message ul {
  overflow: auto;
}
#step-3 .container .message li {
  width: 50%;
  float: left;
  box-sizing: border-box;
  margin-bottom: 15px;
}
#step-3 .container .message li .icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: #cdcdcd;
  vertical-align: middle;
  margin-right: 15px;
  margin-left: 25%;
}
#step-3 .container .message li .icon.person {
  background: url(../../assets/img/icon-person.png) no-repeat center;
}
#step-3 .container .message li .icon.phone {
  background: url(../../assets/img/icon-phone.png) no-repeat center;
}
#step-3 .container .message li .icon.pay {
  background: url(../../assets/img/icon-id.png) no-repeat center;
  background-size: 100%;
}
#step-3 .container .message li .wrapper {
  display: inline-block;
  width: 215px;
  height: 45px;
  line-height: 45px;
  vertical-align: middle;
}
#step-3 .container .message li .payment {
  width: 33% !important;
  text-align: center;
}
#step-3 .container .message li .wrapper .lable {
  display: inline-block;
  width: auto;
}
#step-3 .time-out {
  text-align: center;
  color: #EE781B;
}
.succ {
  color: #6bc285 !important;
}
</style>